<!-- 修改密码 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		title="修改密码"
		v-model="props.visible"
		destroy-on-close
		@close="close"
		align-center
		:open-delay="0"
		width="400px"
		:draggable="true"
	>
		<div class="pwdStrongTip">
			<div class="pwdTips">密码必须包含数字及大小写字母</div>
			<div class="pwdLayout">
				<div class="tipBar">
					<div
						:style="{
							'background-color': state.msgText >= 1 ? '#f89898' : '#b1b3b8',
						}"
					></div>
					<div
						:style="{
							'background-color': state.msgText >= 2 ? '#eebe77' : '#b1b3b8',
						}"
					></div>
					<div
						:style="{
							'background-color': state.msgText >= 3 ? '#95d475' : '#b1b3b8',
						}"
					></div>
				</div>
				<div class="tipText">
					{{ state.msgMap[state.msgText] }}
				</div>
			</div>
		</div>

		<el-form ref="ruleFormRef" :model="state.form" :rules="rules" label-position="right" label-width="100px">
			<el-form-item label="新密码" prop="password">
				<el-input v-model="state.form.password" />
			</el-form-item>

			<el-form-item label="确认密码" prop="rePassword">
				<el-input v-model="state.form.rePassword" />
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button plain type="warning" size="default" @click="close"> 取消 </el-button>
				<el-button plain type="primary" size="default" @click="submit(ruleFormRef)"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup name="EditPass">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { smokeStore } from '/@/stores/smoke';
import { ElMessage, ElMessageBox } from 'element-plus';
import { resetPwdPersonal } from '/@/api/system/personal';
import { Session } from '/@/utils/storage';

const props = defineProps({
	visible: {
		type: Boolean,
		default: true,
	},
});

const ruleFormRef = ref();

// emit
const emit = defineEmits(['close', 'success']);

const state = reactive({
	msgText: 0,
	msgMap: <any>{
		1: '弱',
		2: '中',
		3: '强',
		4: '安全',
	},
	form: {
		password: '',
		rePassword: '',
	},
});

const validatePass = (rule: any, value: any, callback: any) => {
	let reg = /^(?![^a-z]+$)(?![^A-Z]+$)(?!\D+$)/;
	if (value === '') {
		callback(new Error('密码不能为空'));
	} else {
		if (!reg.test(value)) {
			callback(new Error('必须包含数字和大小写字母'));
		} else {
			callback();
		}
	}
};
const validatePass2 = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请确认密码'));
	} else if (value !== state.form.password) {
		callback(new Error('两次密码不一致'));
	} else {
		callback();
	}
};

const rules = reactive({
	password: [{ validator: validatePass, trigger: ['blur', 'change'] }],
	rePassword: [{ validator: validatePass2, trigger: ['blur', 'change'] }],
});

onMounted(() => {});

onBeforeUnmount(() => {
	smokeStore().clearDeviceParams();
});

watch(
	() => state.form.password,
	(newValue: any) => {
		if (newValue.length >= 8) {
			state.msgText = checkStrong(newValue);
		} else {
			state.msgText = 0;
		}
	},
	{
		deep: true,
	}
);

function checkStrong(sValue: string) {
	var modes = 0;
	//正则表达式验证符合要求的
	if (sValue.length < 1) return modes;
	if (/\d/.test(sValue)) modes++; //数字
	if (/[a-z]/.test(sValue)) modes++; //小写
	if (/[A-Z]/.test(sValue)) modes++; //大写
	if (/\W/.test(sValue)) modes++; //特殊字符
	// console.log("modes:", sValue.length, modes)
	//逻辑处理
	switch (modes) {
		case 1:
			return 1;
			break;
		case 2:
			return 2;
			break;
		case 3:
			return 3;
			break;
		case 4:
			return 4;
			break;
	}
	return modes;
}

function close() {
	emit('close');
}

function submit(formEl: any) {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			resetPwdPersonal({ password: state.form.password }).then(() => {
				ElMessage.success('修改成功');

				Session.clear();
				window.location.reload();
			});
		} else {
			return false;
		}
	});
}
</script>
<style lang="scss" scoped>
.pwdStrongTip {
	display: flex;
	flex-direction: column;
	width: 70%;
	justify-content: flex-end;
	clear: both;
	margin-left: 30%;
	margin-bottom: 40px;

	.pwdTips {
		display: flex;
		justify-content: flex-start;
		font-size: 12px;
		margin-bottom: 10px;
		width: 100%;
	}

	.pwdLayout {
		display: flex;
		// justify-content: flex-end;
		align-items: center;

		.tipBar {
			height: 6px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			width: calc(100% - 60px);
			border-radius: 3px;
			overflow: hidden;
		}

		.tipText {
			font-size: 12px;
			margin-left: 10px;
			color: #606266;
			width: 30px;
			text-align: center;
		}
	}
}
:deep(.el-dialog__body) {
	padding: 0;
}

.dialog-footer {
	margin-top: 20px;
}
</style>
